<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="buttons.css">
	<style type="text/css">
		#player{
			margin-bottom: 2em;
			text-align: center;
		}
		#controller{
			text-align: center;
		}
		h1{
			text-align: center;
			font-size: 21pt;
			color: #999;
		}
		#extra{
			text-align: center;
		}
	</style>
</head>
<body>
	<h1>Web Audio Recorder</h1>
	<div id="player">
	    <audio controls="" autoplay=""></audio>
	</div>
	
	<div id="controller">
		<a onclick="startRecording()" class="button button-circle button-primary" type="button" value="">Record</a>
		<a onclick="stopRecording()" class="button button-circle button-caution" type="button" value="">Stop<a>		
	</div>
	<p id="extra">
		<a id="download" onclick="downloadWAV()" class="button button-flat-action">Download</a>
	</p>
	<script type="text/javascript" src="recorder.js"> </script>
	<script type="text/javascript" src="FileSaver.js"></script>
	<script>
		var record;
		var onFail = function(e) {
			console.log('Rejected!', e);
		};

		var onSuccess = function(s) {
			// s represents the local media stream
			var context = new webkitAudioContext();
			var mediaStreamSource = context.createMediaStreamSource(s);
			recorder = new Recorder(mediaStreamSource);
			recorder.record();

			// audio loopback
			// mediaStreamSource.connect(context.destination);
		}

		window.URL = window.URL || window.webkitURL;
		navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

		var recorder;
		var audio = document.querySelector('audio');

		function startRecording() {
			if (navigator.getUserMedia) {
				navigator.getUserMedia({audio: true}, onSuccess, onFail);
			} else {
				console.log('navigator.getUserMedia not present');
			}
		}

		function stopRecording() {
			recorder.stop();
			recorder.exportWAV(function(s) {
				audio.src = window.URL.createObjectURL(s);
				record = s;
			});
		}
		function downloadWAV(){
			if(record){
				saveAs(record,"record.wav");
			}
		}
	</script>	
</body>
</html>
